<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>网易云音乐 API</title>
  <style>
      html,
      body {
          height: 100vh;
          width: 100vw;
          margin: 0;
          padding: 0;
          background: #ffffff;
          text-align: center;
          margin-top: 10px;
          overflow: hidden;
      }
      .el-table__body-wrapper::-webkit-scrollbar {
          /*width: 0;宽度为0隐藏*/
          width: 0px;
      }
      .el-table__body-wrapper::-webkit-scrollbar-thumb {
          border-radius: 2px;
          height: 50px;
          background: #eee;
      }
      .el-table__body-wrapper::-webkit-scrollbar-track {
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          border-radius: 2px;
          background: rgba(0, 0, 0, 0.4);
      }

  </style>

  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">

</head>

<body>
<div id="app">
  <h1>网易云音乐</h1>

<!--  当你看到这个页面时,这个服务已经成功跑起来了~-->
<!--  <a href="https://neteasecloudmusicapi.vercel.app">查看文档</a>-->
<!--  <h2>例子:</h2>-->

  <el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
    <el-form-item style="width: calc(22%)">
      <el-select v-model="category" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item style="width: calc(38%)">
      <el-input v-model="keyWords" placeholder="赶快动手吧!" @keyup.enter.native="clearSearch"></el-input>
    </el-form-item>
    <el-form-item style="width: calc(22%)">
      <el-button @click="clearSearch">查询</el-button>
    </el-form-item>
  </el-form>
  <el-table
      ref="TestTable"
    :data="itemList"
    border
    @row-click="handle"
    height="600"
    width="100%">
    <el-table-column
      label="封面"
      minWidth="80">
      <template slot-scope="scope">
        <el-link href="#">
          <el-image
          style="width: 50px; height: 50px"
          :src="scope.row.al.picUrl"></el-image>
        </el-link>
      </template>
    </el-table-column>
    <el-table-column
      prop="al.name"
      label="专辑"
      minWidth="120">
    </el-table-column>
    <el-table-column
      prop="ar"
      label="歌手"
      minWidth="120">
    </el-table-column>
    <el-table-column
      prop="name"
      label="歌名"
      minWidth="120">
    </el-table-column>
    <el-table-column
      label="操作"
      minWidth="200">
      <template slot-scope="scope">
        <el-link type="warning" :href="scope.row.url">下载</el-link>
      </template>
    </el-table-column>
  </el-table>
</div>
<div id="aplayer"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  const ap = new APlayer({
    container: document.getElementById('aplayer'),
    lrcType: 1,
    mutex: true,
    fixed: true,
    storageName: 'music_key'
  })
  const app = new Vue({
    el: "#app",
    data: {
      keyWords: "",
      itemList: [],
      query: { page: 1, pageSize: 10},
      options: [{
          value: 1,
          label: '单曲'
        }, {
          value: 100,
          label: '歌手'
        }],
        category: 1,
        playKey: 0
    },
    mounted() {
      const that = this
      ap.on('ended', function () {
        if(that.itemList[++ that.playKey]) {
          that.play(that.playKey)
        }
      });
      if(!that.getCookie('__csrf') && !that.getCookie('MUSIC_U')) {
        console.log('login...')
        const login = axios({
            url: "/login/cellphone",
            method: "get",
            params: {
              phone: '18179144782',
              md5_password: 'fd06c0c715d4ae3569b6b2fda805e9dd'
            }
          })
      }
      that.listener()
    },
    methods: {
      getCookie(name){
        var strcookie = document.cookie;
        var arrcookie = strcookie.split("; ");
        for ( var i = 0; i < arrcookie.length; i++) {
            var arr = arrcookie[i].split("=");
            if (arr[0] == name){
                return arr[1];
            }
        }
        return "";
      },
      clearSearch() {
        this.query = { page: 1, pageSize: 10}
        this.itemList = []
        this.search()
      },
      play: async function(i) {
        const temp = this.itemList
        if(!temp[i]) {
          console.log('url is null...')
          return
        }
        const res1 = await axios({
            url: "/song/url",
            method: "get",
            params: {
              id: temp[i].id
            }
          });
        if (!res1.data.data[0].url) { 
          this.play(++ i)
        }
        const lyric = await axios({
          url: "/lyric",
          method: "get",
          params: {
            id: temp[i].id
          }
        });
        ap.list.clear()
        ap.list.add({
          name: temp[i].name,
          artist: temp[i].ar,
          url: res1.data.data[0].url,
          cover: temp[i].al.picUrl,
          theme: "#ebd0c2",
          lrc: lyric.data.lrc.lyric
        });
        this.playKey = i
        ap.lrc.show()
        ap.play()
      },
      handle(row, event, column) {
        this.play(row.index)
      },
      listener() {
        const that = this;
        let dom = that.$refs.TestTable.bodyWrapper
        dom.addEventListener("scroll", function () {
            const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
            if (scrollDistance <= 10) {
                that.query.page++;
                that.search()
            }
        })
      },
      search: async function() {
        const _that = this;
        if (!_that.keyWords) {
          let hotUrl = '/search/hot'
          if (_that.category === 100) {
            hotUrl = '/top/artists'
          } 
          const res = await axios({
            url: hotUrl,
            method: "get"
          });
          if (_that.category === 100) {
            _that.keyWords = res.data.artists[parseInt(Math.random() * 10)].name;
          } else {
            _that.keyWords = res.data.result.hots[parseInt(Math.random() * 10)].first;
          }
        }
        let res = await axios({
          url: "/cloudsearch",
          method: "get",
          params: {
            keywords: _that.keyWords,
            limit: _that.query.pageSize,
            offset: ((_that.category === 100 ? 1 : _that.query.page) - 1) * _that.query.pageSize,
            type: _that.category
          }
        });
        let imageUrl = ''

        if (_that.category === 100) {
          if (!res.data.result.artists) {
            console.log('error ....')
            return
          }
          imageUrl = res.data.result.artists[0].picUrl
          res = await axios({
            url: "/artist/songs",
            method: "get",
            params: {
              id: res.data.result.artists[0].id,
              order: 'hot',
              limit: _that.query.pageSize,
              offset: (_that.query.page - 1) * _that.query.pageSize,
            }
          });
        }
        let temp = res.data.result ? res.data.result.songs : res.data.songs
        for (let i = 0; i < temp.length; i++) {
          if (temp[i].ar[0]) {
            temp[i].ar = temp[i].ar[0] ? (temp[i].ar[0].name + (temp[i].ar[1] ? ('/' + temp[i].ar[1].name) : '')) : '';
          }
          if (_that.category === 100) {
            temp[i].al.picUrl = imageUrl
          }
          temp[i].index = _that.itemList.length
          _that.itemList.push(temp[i])
          if (_that.itemList.length === 1) {
            _that.playKey = 0
            _that.play(0);
          }
        }
      }
    }
  });
</script>

</html>
